<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>%VITE_APP_TITLE%</title>
</head>

<body>
  <div id="app">
    <style>
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .loader {
        position: relative;
        display: flex;
        gap: 0.3em;
      }

      .loader__circle {
        --size__loader: 2.6em;
        width: var(--size__loader);
        height: var(--size__loader);
        border-radius: 50%;
        animation: loader__circle__jumping 2s infinite;
        background-color: #b499ff;
      }

      .loader__circle:nth-child(2n) {
        animation-delay: 300ms;
        background-color: #e499ff;
      }

      .loader__circle:nth-child(3n) {
        animation-delay: 600ms;
      }

      @keyframes loader__circle__jumping {
        0%,
        100% {
          transform: translateY(0px);
        }

        25% {
          transform: translateY(-1.5em) scale(0.5);
        }

        50% {
          transform: translateY(0px);
        }

        75% {
          transform: translateY(0.5em) scale(0.9);
        }
      }
    </style>
    <div class="loader">
      <div class="loader__circle"></div>
      <div class="loader__circle"></div>
      <div class="loader__circle"></div>
      <div class="loader__circle"></div>
      <div class="loader__circle"></div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>